<template>
  <div>
    <div class="line-top"><el-button @click="showForms" type="primary">添加</el-button></div>
    <list @refreshData='refreshData' @updatemenu='updatemenu' :menuArr="menuArr"></list>
    <forms @refreshData='refreshData' ref="curforms" :menuArr="menuArr" :formObj="obj"></forms>
  </div>
</template>

<script>
//混入：
import mixinfo from "../../mixin/mixins.js";
import { getMenuList } from "../../request/api.js";
import list from "./component/list.vue";
import forms from "./component/forms.vue";


export default {
   mixins:[mixinfo],
   components:{
    list,
    forms
   },
   data(){
     return {
      menuArr:[],//所有菜单数据
      // formObj:{
      //   isshow:false  //对话框是否显示
      // }
     }
   },
   methods:{
    refreshData(){  //修改、添加、删除成功后重新刷新列表中的菜单数据
       this.getAllMenuData()
    },
    updatemenu(mid){ //显示要修改菜单的表单数据
         this.showForms(); //显示对话框
        //调用forms.vue子组件中的getOneMenuInfo方法
        this.$refs.curforms.getOneMenuInfo(mid);
    },
    showForms(){  //显示添加表单
       this.obj.isshow = true;
    },
    getAllMenuData(){
      getMenuList().then(d=>{
         if(d.data.code == 200){
            this.menuArr = d.data.list;
         } 
      }).catch(e=>{
        console.log('调用菜单列表接口失败');
      });
    }
   },
   mounted(){
    this.getAllMenuData();
   }
}
</script>

<style>
.line-top{
  margin-bottom: 15px;
}
</style>